<template>
  <div class="prodTreeNode">
    <el-row :style="{padding: '20px', backgroundColor: '#fff'}">
      <el-col :span="24">
        <!-- v-btnPermission:add -->
        <el-button
          v-btnPermission:add
          type="primary"
          icon="el-icon-plus"
          @click="addTreeNode"
        >
          {{ $t('add') }}</el-button>
      </el-col>
    </el-row>
    <el-card>
      <el-row>
        <el-table
          :data="tableData"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          :default-expand-all="true"
          :header-cell-style="{ background: '#F2F6FC', color: '#606266' }"
          style="width: 100%"
          row-key="id"
          tooltip-effect="dark"
          border>
          <el-table-column
            :label="$t('nodeName')"
            prop="name"
            header-align="center"
          />

          <el-table-column
            :label="$t('nodeLevel')"
            prop="levelName"
            align="center"
            header-align="center"
            show-overflow-tooltip
          />
          <!-- <el-table-column prop="isEqpType" label="设备类型层级" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isEqpType"
                active-color="#13ce66"
                inactive-color="#ff4949"
                disabled
              />
            </template>
          </el-table-column> -->
          <el-table-column
            :label="$t('description')"
            prop="description"
            align="center"
            header-align="center"
            show-overflow-tooltip
          />
          <el-table-column
            :label="$t('creator')"
            prop="creator"
            align="center"
            header-align="center"
            show-overflow-tooltip
          />
          <el-table-column
            :label="$t('createTime')"
            prop="createTime"
            align="center"
            header-align="center"
            show-overflow-tooltip
          />
          <el-table-column
            :label="$t('Source')"
            prop="source"
            align="center"
            header-align="center"
            show-overflow-tooltip
          />
          <el-table-column
            :label="$t('action')"
            header-align="center"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <el-button
                :disabled="scope.row.source === 'RMS' || !($route.meta.powers.includes('edit'))"
                size="mini"
                type="primary"
                @click="handleOpenChild(scope)"
              >{{ $t('edit') }}</el-button>
              <el-button
                :disabled="scope.row.source === 'RMS'|| !($route.meta.powers.includes('delete'))"
                size="mini"
                type="danger"
                @click="handleDelete(scope)"
              >{{ $t('delete') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
    <rootTreeModel ref="rootTreeModel" @initList="initList" />
  </div>
</template>

<script>
import mySetting from '@/mixins/mySetting'
import { getTreeList, doDelete } from '@/api/equipment/prodTreeNode'
import rootTreeModel from './components/rootTreeModel.vue'
export default {
  name: 'ProdTreeNode',
  components: { rootTreeModel },
  mixins: [mySetting],
  data() {
    return {
      tableLoading: true,
      tableData: []
    }
  },
  created() {
    this.initList()
  },
  methods: {
    async initList() {
      const res = await getTreeList()
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    addTreeNode() {
      this.$refs.rootTreeModel.handleOpen()
    },
    handleOpenChild({ row }) {
      if (row.source === 'RMS') return
      this.$refs.rootTreeModel.handleOpen(row)
    },
    handleDelete({ row }) {
      if (row.source === 'RMS') return
      this.$confirm(
        `${this.$t('confirmDeleteData')}?`,
        this.$t('tip'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        doDelete({ id: row.id }).then(res => {
          this.$betterTips(res, this.setOnePage, this.initList)
        })
      })
    }
  }
}
</script>
<style scoped lang="scss">
.prodTreeNode{
    padding-bottom: 40px;
}
.el-tree{
    margin-top: 10px;
}
</style>
